<template>
	<u-popup v-model="show" mode="bottom" closeable >
		<view class="pop">
			<view class="f36 c3 bold t-flex center">选择优惠券</view>
			
			<scroll-view scroll-y="true" class="scroll">
				<view class="item" v-for="item in canUse" :key="item.id">
					<coupon  :data="item" @click="change"></coupon>
					<view class="check round  t-flex center" :class="{'active':active == item.id}">
						<view></view>
					</view>
				</view>
				<empty msg="暂无可用优惠券" v-if="canUse.length === 0"></empty>
				
			</scroll-view>
			
			<view class="confirm t-flex center cf f30  bold mainBC" @click="emit('confirm',active);show = false">
				确认
			</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { userCoupon } from '../../api';
	
	let show = ref(false)
	const emit = defineEmits(['confirm'])

	
	let props = defineProps({
		goods:{
			type:Number,
			default:0
		},
		full:{
			type:Number,
			default:0
		}
	})
	
	const data = reactive({
		list:[],
		async init(){
			data.list = await userCoupon(props.goods)
		}
	})
	
	const canUse = computed(()=>{
		return data.list.filter(item=>+item.full_price <= +props.full)
	})
	
	
	
	const open = (id)=>{
		active.value = id
		if(!data.list.length) data.init()
		show.value = true
	}
	
	let active = ref('')
	const change =(e)=>{
		active.value = e.id
	}
	
	
	
	defineExpose({
		open,
		data,
		canUse
	})
	
</script>

<style scoped lang="scss">
	.pop{
		padding: 40rpx 30rpx;
	}
	.scroll{
		max-height: 50vh;
	}
	.item{
		position: relative;
		.check{
			width: 36rpx;
			height: 36rpx;
			background: #FCFCFC;
			border: 2rpx solid #EEEEEE;
			position: absolute;
			right: 30rpx;
			top: 60rpx;
			view{
				width: 12rpx;
				height: 12rpx;
				background-color: $main-color;
				border-radius: 50%;
				opacity: 0;
			}
		}
		.check.active{
			border-color: $main-color;
			view{
				opacity: 1;
			}
			
		}
	}
	
	.confirm{
		width: 100%;
		height: 80rpx;
		border-radius: 200rpx;
		margin-top: 40rpx;
	}

</style>